{extend name="base" /}
<!-- page specific plugin styles -->
{block name="inline-styles"}
<!-- <link rel="stylesheet" href="/static/plugin/UploadFive/uploadifive.css"> -->
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page js_show">
	<div class="page__bd">
		<div class="weui-cells__title">填写资料（有*为必填项）</div>
		<form class="weui-cells weui-cells_form" id="ajaxForm">
			<div class="weui-cell">
	            <div class="weui-cell__hd"><label class="weui-label">* 姓       名：</label></div>
	            <div class="weui-cell__bd">
	                <input class="weui-input" type="text" name="name" placeholder="">
	            </div>
	        </div>

	        <div class="weui-cell">
	            <div class="weui-cell__hd"><label class="weui-label">* 微  信  号：</label></div>
	            <div class="weui-cell__bd">
	                <input class="weui-input" type="text" name="weixin" placeholder="">
	            </div>
	        </div>

	        <div class="weui-cell">
	            <div class="weui-cell__hd"><label class="weui-label">* 电       话：</label></div>
	            <div class="weui-cell__bd">
	                <input class="weui-input" type="text" name="tel" placeholder="">
	            </div>
	        </div>

	        <div class="weui-cell">
	            <div class="weui-cell__hd"><label class="weui-label">  邮        箱：</label></div>
	            <div class="weui-cell__bd">
	                <input class="weui-input" type="text" name="email" placeholder="">
	            </div>
	        </div>
<!-- 
	        <div class="weui-cell">
	            <div class="weui-cell__hd"><label class="weui-label">* 身  份  证：</label></div>
	            <div class="weui-cell__bd">
	                <input class="weui-input" type="text" name="idnum" placeholder="">
	            </div>
	        </div>
 -->
	        <div class="weui-cell">
				<div class="weui-cell__hd"><label for="name" class="weui-label">* 所  在  地：</label></div>
				<div class="weui-cell__bd">
					<input class="weui-input" id="city-picker" name="addrvalue" type="text" value="北京 北京市 东城区" readonly="">
					<input name="provincerid" type="hidden" value="1" readonly="">
					<input name="cityid" type="hidden" value="2" readonly="">
					<input name="areaid" type="hidden" value="3" readonly="">
				</div>
			</div>

			<div class="weui-cell">
	            <div class="weui-cell__hd"><label class="weui-label">详细地址</label></div>
	            <div class="weui-cell__bd">
	                <input class="weui-input" type="text" name="addr" placeholder="请填写详细地址">
	            </div>
	        </div>
<!-- 
	        <div class="weui-cell">
	            <div class="weui-cell__bd">
	                <div class="weui-uploader">
	                    <div class="weui-uploader__hd">
	                        <p class="weui-uploader__title">身份证图片（正反面）</p>
	                        <div class="weui-uploader__info"><input type="hidden" name="idpic1"></div>
	                    </div>
	                    <div class="weui-uploader__bd">
	                        <ul class="weui-uploader__files" id="idCardFiles"></ul>
	                        <input id="idCardInput" type="file">
	                    </div>
	                </div>
	            </div>
	        </div>
 -->
	        <div class="weui-cell">
	            <div class="weui-cell__bd">
	                <div class="weui-uploader">
	                    <div class="weui-uploader__hd">
	                        <p class="weui-uploader__title">支付截图</p>
	                        <div class="weui-uploader__info"><input type="hidden" name="idpic2"></div>
	                    </div>
	                    <div class="weui-uploader__bd">
	                        <ul class="weui-uploader__files" id="uploaderFiles">
	                        </ul>
	                        <div class="weui-uploader__input-box">
	                            <input id="fileupload" type="file">
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
		</form>

		<label for="weuiAgree" class="weui-agree">
	        <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" checked="">
	        <span class="weui-agree__text">
	            阅读并同意<a href="javascript:void(0);">《相关条款》</a>
	        </span>
	    </label>

	    <div class="weui-btn-area">
	        <a class="weui-btn weui-btn_primary" href="javascript:;" id="showToast">提交申请</a>
	    </div>

	    <div class="weui-cells__tips">注意：一个手机微信号只能申请一次，禁止替他人申请，避免造成不必要的麻烦！</div>
	
	</div>
	<div class="page__ft">
	    <div class="weui-footer">
	        <p class="weui-footer__links">
	            <a href="javascript:void(0);" class="weui-footer__link">米粒生活</a>
	        </p>
	        <p class="weui-footer__text">Copyright © 2008-2018 mlilife.com</p>
	    </div>
    </div>
</div>

<div class="page msg_success">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">提交成功</h2>
            <p class="weui-msg__desc" style="text-align: center;">请耐心等待管理员审核...</p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="{:url('Index/login')}" class="weui-btn weui-btn_primary">立即登陆</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">米粒生活</a>
                </p>
                <p class="weui-footer__text">Copyright © 2008-2018 mlilife.com</p>
            </div>
        </div>
    </div>
</div>
{/block}
<!-- PAGE CONTENT ENDS -->
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script src="{$Think.const.STATIC_DOMAIN}/static/jquery-weui/dist/js/city-picker.min.js"></script>
<script src="{$Think.const.STATIC_DOMAIN}/static/plugin/UploadFive/jquery.uploadifive.min.js"></script>
<script type="text/javascript">
	$("#city-picker").cityPicker({
		title: "请选择所在地"
	});

    // 身份证上传图片
/*
    var _idpic1="";
	$('#idCardInput').uploadifive({
        'width'        : 77,
        'height'       : 77,
        'buttonClass'  : 'weui-uploader__input-box',
        'buttonText'   : '',
        'queueID'      : 'idCardFiles',
        'itemTemplate' : '<li class="weui-uploader__file uploadifive-queue-item weui-uploader__file_status"><div class="weui-uploader__file-content"></div></li>',
        'auto'         : true, //自动上传
        'fileObjName'  : 'image',
        'fileSizeLimit': 10240,
        'fileType'     : 'image/*',
        'method'       : 'post',
        'formData'     : {'someKey' : 'someValue'},
        'uploadScript' : '/api/v1/tools/upload',
        'multi'        : true,
        'overrideEvents' : ['onProgress'],
        'queueSizeLimit' : 2,
        'removeCompleted' : false,	//删除已上传的队列
        'simUploadLimit' : 0,	//同时上传的文件数
        'truncateLength' : 5,	//截断队列中文件名的字符数
        'uploadLimit'  : 0,	//可以上传的最大文件数
        'onInit'       : function() {
            console.log('onInit:将文件添加到队列中开始上传.');
        },
        'onAddQueueItem' : function(file) {
			console.log('onAddQueueItem:文件 ' + file.name + ' 被添加到队列中!');
		},
        'onError'      : function(errorType) {
        	file.queueItem.find('.weui-uploader__file-content').html('<i class="weui-icon-warn"></i>');
            $.toptip(errorType, 'error');
        },
        'onUpload'     : function(filesToUpload) {
            console.log("onUpload:"+filesToUpload + ' 个文件将被上传.');
        },
        'onSelect' : function(queue) {
            console.log("onSelect:"+queue.queued + ' 文件被添加到队列中.');
        },
        'onProgress'   : function(file, e) {
            if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
            }
            file.queueItem.find('.weui-uploader__file-content').html(percent + '%');
        },
        'onUploadComplete' : function(file, data) {
        	var _json= JSON.parse(data);
        	file.queueItem.css("background-image","url("+_json.data.url+")");
            if(_idpic1==""){
                _idpic1= _json.data.url;
            }else{
                _idpic1= _idpic1+"," + _json.data.url;
            }
            $("input[name=idpic1]").val(_idpic1);
        },
        'onQueueComplete' : function(uploads) {
            console.log("共有"+uploads.successful + ' 个文件上传成功.');
        },
		'onCancel'     : function() {
            console.log('文件 ' + file.name + ' 被取消!');
        },
        'onCheck'      : function(file, exists) {
            if (exists) {
                console.log('文件 ' + file.name + ' 服务器上已存在');
            }
        },
        'onFallback'   : function() {
            alert('Oops!  You have to use the non-HTML5 file uploader.');
        }
    });

*/
    // 支付截图上传图片
	$('#fileupload').uploadifive({
        'width'        : 77,
        'height'       : 77,
        'buttonClass'  : 'weui-uploader__input-box',
        'buttonText'   : '',
        'queueID'      : 'uploaderFiles',
        'itemTemplate' : '<li class="weui-uploader__file uploadifive-queue-item weui-uploader__file_status"><div class="weui-uploader__file-content"></div></li>',
        'auto'         : true, //自动上传
        'fileObjName'  : 'image',
        'fileSizeLimit': 10240,
        'fileType'     : 'image/*',
        'method'       : 'post',
        'formData'     : {'someKey' : 'someValue'},
        'uploadScript' : '/api/v1/tools/upload',
        'multi'        : false,
        'overrideEvents' : ['onProgress'],
        'queueSizeLimit' : 2,
        'removeCompleted' : false,	//删除已上传的队列
        'simUploadLimit' : 0,	//同时上传的文件数
        'truncateLength' : 5,	//截断队列中文件名的字符数
        'uploadLimit'  : 0,	//可以上传的最大文件数
        'onInit'       : function() {
            console.log('onInit:将文件添加到队列中开始上传.');
        },
        'onAddQueueItem' : function(file) {
			console.log('onAddQueueItem:文件 ' + file.name + ' 被添加到队列中!');
		},
        'onError'      : function(errorType) {
        	file.queueItem.find('.weui-uploader__file-content').html('<i class="weui-icon-warn"></i>');
            $.toptip(errorType, 'error');
        },
        'onUpload'     : function(filesToUpload) {
            console.log("onUpload:"+filesToUpload + ' 个文件将被上传.');
        },
        'onSelect' : function(queue) {
            console.log("onSelect:"+queue.queued + ' 文件被添加到队列中.');
        },
        'onProgress'   : function(file, e) {
            if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
            }
            file.queueItem.find('.weui-uploader__file-content').html(percent + '%');
        },
        'onUploadComplete' : function(file, data) {
        	var _json= JSON.parse(data);
            $("input[name=idpic2]").val(_json.data.url);
        	file.queueItem.css("background-image","url("+_json.data.url+")");
        },
        'onQueueComplete' : function(uploads) {
            console.log("共有"+uploads.successful + ' 个文件上传成功.');
        },
		'onCancel'     : function() {
            console.log('文件 ' + file.name + ' 被取消!');
        },
        'onCheck'      : function(file, exists) {
            if (exists) {
                console.log('文件 ' + file.name + ' 服务器上已存在');
            }
        },
        'onFallback'   : function() {
            alert('Oops!  You have to use the non-HTML5 file uploader.');
        }
    });

	$("#showToast").click(function(event) {
		/* Act on the event */
		$('#idCardInput').uploadifive('debug');
		if(GetQueryString("fid")== null){
			var _fid =0;
		}else{
			var _fid = GetQueryString("fid");
		}
		var options={
			url:"/api/v1/member/register",
			type:"POST",
			dataType:"json",
			data: {
				fid : _fid
			},
			success: function(json){

				if(json.returnCode==1){
					$(".msg_success").addClass('js_show');
				}else{
					$.toptip(json.returnMsg, 'error');
				}
			}
		};
		$("#ajaxForm").ajaxSubmit(options)
	});
</script>
{/block}